import { GlobalValue } from "@/GlobalValue";
import { Show } from "@/component/Display";
import { Theme } from "@/hooks/theme";
import { LayoutType } from "@/hooks/theme/LayoutType";
import { LightType } from "@/hooks/theme/LightType";
import { useTranslation } from "@/i18n";
import { CheckOutlined, LayoutOutlined } from "@ant-design/icons";
import BulbFilled from "@ant-design/icons/lib/icons/BulbFilled";
import BulbOutlined from "@ant-design/icons/lib/icons/BulbOutlined";
import ColumnWidthOutlined from "@ant-design/icons/lib/icons/ColumnWidthOutlined";
import SkinFilled from "@ant-design/icons/lib/icons/SkinFilled";
import SkinOutlined from "@ant-design/icons/lib/icons/SkinOutlined";
import { Button, Dropdown, Space, Typography } from "antd";
import { ItemType, MenuItemType } from "antd/es/menu/interface";
import React, { useEffect, useMemo, useState } from "react";
import styles from '../styles.module.scss';

enum MenuItemKey {
  DarkMode = 'dark_mode',
  TightMode = 'tight_mode',
  LayoutType = 'layout_type',
}
function useMenuItems(): ItemType[] {
  const { toggleDark, isDark, lightType, toggleTight, isTight, setCompactnessType, layoutType, toggleLayout } = Theme.use();

  const { smallScreen } = GlobalValue.use(0);
  const { t } = useTranslation();

  useEffect(() => {
    if (smallScreen)
      setCompactnessType(Theme.CompactnessType.tight)
  }, [smallScreen])

  return useMemo(() => {
    const icons: { [x in LightType]?: React.ReactNode } = {
      [LightType.dark]: <BulbFilled />,
      [LightType.light]: <BulbOutlined />
    }
    const ret: MenuItemType[] = [{
      key: MenuItemKey.DarkMode,
      icon: icons[lightType] || <BulbOutlined />,
      style: { whiteSpace: 'nowrap' },
      label: (
        <Space>
          {t("builtin.dark_mode")}
          <Show yes={lightType === LightType.dark}>
            <Typography.Text type='secondary'>
              <CheckOutlined />
            </Typography.Text>
          </Show>
          <Show yes={lightType === LightType.system}>
            <Typography.Text type='secondary'>
              系统
            </Typography.Text>
          </Show>
        </Space>
      ),
      onClick: (e) => {
        e.domEvent.stopPropagation();
        e.domEvent.preventDefault();
        toggleDark()
      },
    }]
    if (smallScreen) return ret

    ret.push({
      key: MenuItemKey.TightMode,
      icon: <ColumnWidthOutlined />,
      style: { whiteSpace: 'nowrap' },
      label: (
        <Space>
          {t("builtin.compact_layout")}
          <Show yes={isTight}>
            <Typography.Text type='secondary'>
              <CheckOutlined />
            </Typography.Text>
          </Show>
        </Space>
      ),
      onClick: toggleTight,
    }, {
      key: MenuItemKey.LayoutType,
      icon: <LayoutOutlined />,
      style: { whiteSpace: 'nowrap' },
      label: (
        <Space>
          {t("builtin.layout_type")}
          <Typography.Text type='secondary'>
            <Show yes={layoutType === LayoutType.sidebar_main}>
              <>⊢</>
            </Show>
            <Show yes={layoutType === LayoutType.topbar_main}>
              <>⊤</>
            </Show>
          </Typography.Text>
        </Space>
      ),
      onClick: toggleLayout,
    })
    return ret
  }, [toggleDark, isDark, toggleTight, isTight, smallScreen])
}

export default function SkinDropdown() {
  const { isDark } = Theme.use()
  const menuItems = useMenuItems();
  const [open, set_open] = useState(false);
  return (
    <Dropdown
      open={open}
      onOpenChange={(open, { source }) => {
        if (open || source !== 'menu') set_open(open)
      }}
      menu={{ items: menuItems }}
      overlayStyle={{ userSelect: 'none' }}
      placement="bottomRight"
      arrow
      trigger={['click']} >
      <Button type="text" className={styles.top_bar_skin_btn}>
        {isDark ? <SkinFilled /> : <SkinOutlined />}
      </Button>
    </Dropdown>

  )
}